/*
 * ### App level ###
 */
.ui-grid {
  width: 100%;
  height: 90%;
  position: absolute;
}

/* Standard style */
.visualizer-screen {
  background-color: #f6f9f8;
  height: 100%;
  position: absolute;
  padding: 4px;
}

/* Custom '15col_red' style */
.visualizer-screen-15col_red {
  background-color: #f6f9f8;
  height: 100%;
  position: absolute;
  padding: 4px;
  border: 2px solid rgb(193, 0, 104) !important;
}

.tools-div {
  position: absolute;
  pointer-events: none;  /* Allow selecting, dragging, etc through this div */
}

.tools-btn {
  pointer-events: all;
}

/* Tighten up default Semantic UI menu dropdown top/bottom padding, as there may be many items in dynamically built filter list */
.ui.dropdown .menu>.item {
  /* padding: 0.78571429rem 1.14285714rem !important;  # semantic ui default */
  padding: 0.392857145rem 1.14285714rem !important;
}

/*
 * ### D3 Graph related ###
 */

svg {
  /*background-color:#666;*/
  cursor: pointer;
  width: 100%;
  height: 100%;
}

svg.rect {
  /*background-color:#666;*/
  width: 100%;
  height: 100%;
}

.ui.icon.buttons {
  opacity: 0.8;
}

/* Tooltips toggle checkbox */
.ui.toggle.checkbox {
  opacity: 0.8;
  pointer-events: all;
}
div.ui.toggle.checkbox > input[type="checkbox"] {
  margin-left: 0px;  /* Else incorrect left margin in ASE */
}
.ui.toggle.checkbox label {
  /* font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; */
  padding-top: 0em !important;  /* icon alignment */
}
.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before {
  background-color: #00B5AD!important;
}
.ui.toggle.checkbox input~.box:before, .ui.toggle.checkbox input~label:before {
  background-color: #bfece9;
}
.ui.toggle.checkbox input[type="checkbox"]:checked:focus ~ .box:before,
.ui.toggle.checkbox input[type="checkbox"]:checked:focus ~ label:before {
  background-color: #00B5AD!important;
}
.ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before,
.ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before {
  background-color: #bfece9!important;
}

/* Right-side Node properties table */
.selected-node-properties {
  position: absolute;
  right: 0;
  min-width: 180px;
  max-width: 340px;
  /* background-color: black; */
  background-color: #00B5AD;
  opacity: 0.9;
  padding: 6px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  user-select: none;
  pointer-events: none;  /* Allow selecting, dragging, etc through the table... */
  z-index: 99 !important;
}
#selected-node-properties-close-btn {
  pointer-events: all;  /* ...However, need to enable pointer-events on close button */
}
.selected-node-properties table thead tr th i {
  margin-left: 2em;
  margin-bottom: 0em;
}
.right.floated {  /* Right floated not supported by Semantic UI. Manually add support for it */
  float: right;
}

.links line {
  stroke: #000;
  stroke-opacity: 0.6;
  /* stroke-width: ?px; */
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
  /* opacity: 0.8; */
}

text.edgelabelshadow {
  stroke: #fff;
}

/* Button tooltips */
/* Workaround to get tooltip on top of toggle checkbox does not work. Issue is due
   to Semantic UI Pop bug: https://github.com/Semantic-Org/Semantic-UI/issues/5069
[data-tooltip]:after {
  z-index: 1600;
} */

/* Node & Link tooltips */
.tooltip {
  position: absolute;
}
.html-tooltip {
  position: absolute;
  text-align: center;
  line-height: 0.75em !important;
  padding: 2px;
  /* font: 10px sans-serif; */
  font-size: 12px;
  background: #00B5AD;
  pointer-events: none;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.html-detailed-tooltip {
  position: absolute;
  text-align: center;
  min-width: 185px;
  max-width: 340px;
  padding: 2px;
  /* font: 10px sans-serif; */
  font-size: 12px;
  background: #00B5AD;
  pointer-events: none;
  border-radius: 3px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}

/* Context (right-click) menus */
.d3-context-menu {
  position: absolute;
  display: none;
  background-color: #f2f2f2;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  min-width: 150px;
  border: 1px solid #d4d4d4;
  z-index:1200;
}
.d3-context-menu ul {
  list-style-type: none;
  margin: 4px 0px;
  padding: 0px;
  cursor: default;
}
.d3-context-menu ul li {
  padding: 4px 16px;
}
.d3-context-menu ul li:hover {
  background-color: #4677f8;
  color: #fefefe;
}
